<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::common_header(~{::title},~{::link},~{})">
    <title>设备管理</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
</head>
<body>
<div th:replace="common/bar::topbar" style="height: 100%"></div>
<div class="container-fluid">
    <div class="row">
        <!--左边导航栏-->
        <div th:replace="common/bar::#sidebar"></div>
        <!--//中间表格栏-->
        <div style="margin: 15px">
            <table class="table">
                <thead class="thead-light">
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">卡号</th>
                    <th scope="col">卡成员</th>
                    <th scope="col">删除</th>
                    <th>
                        <a class="btn btn-secondary" th:href="@{/deviceSet/addKeyCardMember}"> 新增</a>
                    </th>
                </tr>
                </thead>
                <tbody id="t_body">
                </tbody>
            </table>
        </div>

    </div>
</div>
</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {
        //分页查询
        window.onload = initCard();

        function initCard() {
            $.ajax({
                url: '/data/keyCard/api/findAllCard',
                type: 'get',
                dataType: 'json',
                data: {},
                success: function fillTable(data) {
                    var list = data.data
                    var trs = ''
                    if (data.code == 200)
                        for (var i = 0; i < list.length; i++) {
                            var tr = '<tr > <th scope="row">#</th>' +
                                '<td >' + list[i].cardId + '</td> <td>' +
                                '<div class="input-group mb-3">' +
                                '<form class="form-check-inline" >' +
                                '<input type="text" class="form-control" id="KeyCard' + list[i].keyId + '" placeholder="' + list[i].cardDesc + '" value="' + list[i].cardDesc + '" aria-label="Recipient\'s username"aria-describedby="basic-addon2" name="desc">' +
                                '<button class="btn btn-info" type="button" onclick="modifyJob(' + list[i].keyId + ')">修改</button>' +
                                '</form></div></td><td>' +
                                '<form class="form-check-inline" >' +
                                '<button class="btn btn-danger" type="button" onclick="deleteJob(' + list[i].keyId + ')">删除</button>' +
                                '</form> </td> </tr>';
                            trs += tr;
                        }
                    $("#t_body").append(trs);

                }

            })

        }
    })


</script>
<script type="text/javascript">
    function modifyJob(arr) {
        var ModifyDesc = 'KeyCard' + arr
        $.ajax({
            url: '/data/keyCard/api/updateCardMaster/' + arr,
            type: 'post',
            dataType: 'json',
            data: {
                _method: "PUT",
                cardDesc: $('#' + ModifyDesc).val()
            },
            success: function callbackFun(data) {
                alert(data.code + data.message)
                window.location.href = "/KeyCardMember"
            }
        });
    };

    function deleteJob(arr) {
        $.ajax({
            url: '/data/keyCard/api/deleteCardMaster/' + arr,
            type: 'post',
            dataType: 'json',
            data: {
                _method: "delete"
            },
            success: function callbackFun(data) {
                alert(data.code + data.message)
                window.location.href = "/KeyCardMember"
            }
        });
    }
</script>